import React, { useEffect, useState, memo } from 'react'
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
import { Skeleton } from 'antd'
import { ipList as presentIp } from '../../ipConfig'

const Guests = ({ time, registerId }) => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let url = `${presentIp.DEV_IP}/card_data?registerId=${registerId}&leftTime=${time[0]}&rightTime=${time[1]}`
    setLoading(true)
    console.log(url)
    fetch(url, {
      headers: {
        token: sessionStorage.getItem('token'),
      },
    })
      .then((response) => {
        return response.json()
      })
      .then((json) => {
        setData(json.data)
        setLoading(false)
      })
  }, [registerId, time])

  useEffect(() => {
    if (data) {
      // document.getElementById(`guests${registerId}`).innerHTML = ""
      draw(data)
    }
  }, [data, registerId])

  const draw = (data) => {
    const chart = new Chart({
      container: `guests${registerId}`,
      autoFit: true,
      height: 500,
      padding: 0,
    })

    chart.scale({
      range: {
        nice: true,
        sync: true,
      },
      reqTime: {
        range: [0.05, 0.95],
        tickCount: 7,
        type: 'timeCat',
        mask: 'MM/DD HH:mm',

        nice: true,
        sync: true,
      },
      value: {
        nice: true,
        sync: true,
      },
    })
    chart.legend('status', false)
    chart.tooltip({
      showCrosshairs: true,
      showMarkers: false,
      shared: true,
      crosshairs: {
        type: 'xy', // 展示十字辅助线
      },
    })

    const ds = new DataSet()
    let flag1 = 0
    const first1 = { firstInTime: 0, firstOutTime: 0 }
    let lastRange1 = {
      lastInTime: 0,
      lastOutTime: 0,
      lastInTimes: 0,
      lastOutTimes: 0,
    }

    const dv = ds
      .createView()
      .source(data)
      .transform({
        type: 'map',
        callback(row) {
          if (!flag1 && row.status) {
            first1.firstInTime = row.inTime
            first1.firstOutTime = row.outTime
            flag1 = flag1 + 5
          }
          if (row.inTime === 0) {
            row.inTime -= first1.firstInTime
            row.outTime -= first1.firstOutTime
            row.inTime = lastRange1.lastInTime
            row.outTime = lastRange1.lastOutTime
            row.inTimes = lastRange1.lastInTimes
            row.outTimes = lastRange1.lastOutTimes
            row.range = [row.inTime, row.outTime]
            return row
          }
          row.inTime -= first1.firstInTime
          row.outTime -= first1.firstOutTime
          row.range = [row.inTime, row.outTime]
          lastRange1.lastInTime = row.inTime
          lastRange1.lastOutTime = row.outTime
          lastRange1.lastInTimes = row.inTimes
          lastRange1.lastOutTimes = row.outTimes
          return row
        },
      })
    // view1
    const view1 = chart.createView({
      padding: [8, 8, 48, 64],
    })
    view1.data(dv.rows)
    view1.axis(false)
    view1.tooltip(false)
    view1
      .area()
      .tooltip(false)
      .position('reqTime*range')
      .color('#8d8d8d')
      .style({
        fillOpacity: 0.1,
      })
    // view2
    const dv2 = dv
    dv2.transform({
      type: 'fold',
      fields: ['inTime', 'outTime'],
      key: 'type',
      value: 'value',
      retains: ['inTimes', 'outTimes', 'reqTime', 'status'],
    })
    const view2 = chart.createView({
      padding: [8, 8, 48, 64],
    })

    view2.data(dv2.rows)
    view2.line().position('reqTime*value').color('type', ['blue', 'pink'])

    /*  view2
       .point()
       .tooltip(false)
       .position('reqTime*value')
       .size(3)
       .color('status', val => {
         if (val === 0)
           return 'red'
         else
           return 'green'
       })
       .shape('type', ['circle', 'diamond']) */

    // view3
    const dv3 = dv
    dv3.transform({
      type: 'fold',
      fields: ['inTimes', 'outTimes'],
      key: 'type',
      value: 'value',
      retains: ['inTime', 'outTime', 'reqTime', 'status'],
    })
    const view3 = chart.createView({
      padding: [8, 8, 48, 64],
    })
    view3.data(dv3.rows)
    view3.line().position('reqTime*value').color('type', ['yellow', 'black'])
    chart.option('slider', { start: 0.2, end: 0.6 })
    chart.removeInteraction('legend-filter') // 移除默认的 legend-filter 数据过滤交互
    chart.interaction('legend-visible-filter') // 使用分类图例的图形过滤
    chart.render()
  }

  return (
    <>
      <Skeleton loading={loading} active>
        <div id={`guests${registerId}`}></div>
      </Skeleton>
    </>
  )
}
export default memo(Guests)
